<template>
  <view class="address">
    <!-- <view class="top-tips">示例: 张三 13500000000 广东省 广州市 天河区xx镇xx路xx号。识别后请仔细检查地址是否有误，以免下单失败，邮寄错误!</view> -->
    <view class="copy">
      <textarea
        class="copy-input"
        v-model="copyAddress"
        placeholder="粘贴地址到此处，将自动识别姓名/电话/地址"
      ></textarea>
      <view class="copy-btns">
        <!-- <button
          class="clear"
          @click="copyAddress = ''"
          size="mini"
          type="default"
        >
          清空
        </button> -->
        <!-- <button class="copys" @click="copyFn" size="mini" type="primary">
          识别
        </button> -->
        <text class="copys" @click="copyFn">识别地址</text>
      </view>
    </view>
    <!-- <view class="address-form">
      <form :model="form" label-width="130" ref="uForm">
        <view
          style="
            display: flex;
            border-bottom: 1px solid #dbdbdb;
            padding: 20rpx 0;
          "
        >
          <text style="padding-right: 10rpx">姓名:</text
          ><input v-model="form.name" placeholder="请输入姓名" />
        </view>
        <view
          style="
            display: flex;
            border-bottom: 1px solid #dbdbdb;
            padding: 20rpx 0;
          "
        >
          <text style="padding-right: 10rpx">手机号：</text>
          <input v-model="form.mobile" placeholder="请输入手机号" />
        </view>
        <view
          style="
            align-items: center;
            justify-content: space-between;
            display: flex;
            border-bottom: 1px solid #dbdbdb;
            padding: 20rpx 0;
          "
        >
          <view style="padding-right: 10rpx; width: 140rpx">所属省份:</view>
          <picker @change="confirmFn" :value="form.defaultRegion" mode="region">
            <text
              class="address-form-province"
              v-text="form.region ? form.region : '请选择'"
            ></text>
          </picker>
        </view>
        <view
          style="
            display: flex;
            border-bottom: 1px solid #dbdbdb;
            padding: 20rpx 0;
          "
        >
          <text style="padding-right: 10rpx; white-space: nowrap"
            >详细地址:</text
          >
          <textarea
            style="height: 60rpx"
            v-model="form.print_addr"
            placeholder="请输入详细地址"
          />
        </view>
      </form>
      <view style="padding-top: 20rpx; font-weight: 600">解析数据结构：</view>
      <view style="word-break: break-all" v-text="result"></view>
    </view> -->
  </view>
</template>

<script setup>
import { inject, ref } from "vue";
import { AddressParse } from "./lib/addressParseBundle.js";
const emit = defineEmits(["confirm"]);

const copyAddress = ref("");
// copyAddress:'',
const form = ref({
  name: "",
  mobile: "",
  print_addr: "",
  region: "",
  province: "",
  city: "",
  area: "",
  district: "",
  defaultRegion: [],
});
const result = ref("");
// export default {
// 	components:{
// 	},
// 	data() {
// 		return {

// 		}
// 	},

const confirmFn = (res) => {
  const region = `${res.detail.value[0]} ${res.detail.value[1]} ${res.detail.value[2]}`;
  const defaultRegion = [
    res.detail.value[0],
    res.detail.value[1],
    res.detail.value[1],
  ];
  form.value.province = res.detail.value[0];
  form.value.city = res.detail.value[1];
  form.value.area = res.detail.value[2];
  form.value.region = region;
  form.value.defaultRegion = defaultRegion;
  // this.$set(this.form,'province',res.detail.value[0]);
  // this.$set(this.form,'city',res.detail.value[1]);
  // this.$set(this.form,'area',res.detail.value[2]);
  // this.$set(this.form,'region',region);
  // this.$set(this.form,'defaultRegion',defaultRegion);
};
const copyFn = () => {
  const [result] = AddressParse.parse(copyAddress.value);
  if (!result) {
    return uni.showToast({
      title: "请输入需要解析地址",
      icon: "none",
      mask: true,
    });
  }
  form.value.defaultRegion = [];
  // this.$set(this.form, 'defaultRegion', []);
  result.value = JSON.stringify(result);
  // 识别不出来
  if (!result.province || !result.city) {
    return uni.showModal({
      title: "地址识别有误，请修改地址正确格式",
      content:
        "姓名、手机号和地址用空格分开:如 张三 13500000000 广东省广州市天河区xx镇xx路xx号。识别后请仔细检查地址是否有误!",
      showCancel: false,
    });
  }
  if (result.province === "北京") {
    result.province = "北京市";
  }
  if (result.province === "天津") {
    result.province = "天津市";
  }
  if (result.province === "上海") {
    result.province = "上海市";
  }
  if (result.province === "重庆") {
    result.province = "重庆市";
  }
  if (result.province.indexOf("市") > -1) {
    result.city = "市辖区";
  }
  if (
    result.province === "广东省" &&
    (result.city === "东莞市" || result.city === "中山市")
  ) {
    result.area = result.city === "东莞市" ? "东莞市" : "中山市";
  }
  // 修复江苏省徐州市徐州经济技术开发区自动识别错误bug
  if (
    result.province === "江苏省" &&
    result.city === "徐州市" &&
    result.area === "" &&
    /^经济技术开发区/.test(result.details)
  ) {
    result.area = "徐州经济技术开发区";
    result.details = result.details.replace(/^经济技术开发区/, "");
  }

  form.value.province = result.province || "";
  form.value.city = result.city || "";
  form.value.district = result.area || "";
  form.value.region = `${result.province || ""} ${result.city || ""} ${
    result.area || ""
  }`;
  // this.form.province = result.province || '';
  // this.form.city = result.city || '';
  // this.form.district = result.area || '';
  // this.form.region = `${result.province || ''} ${result.city || ''} ${result.area || ''}`;
  const defaultRegion = [
    result.province || "",
    result.city || "",
    result.area || "",
  ];
  if (result.province && result.city && result.area) {
    form.value.defaultRegion = defaultRegion;
    // this.$set(this.form, 'defaultRegion', defaultRegion);
  }
  form.value.print_addr = result.details || "";
  form.value.name = result.name || "";
  form.value.mobile = result.mobile || "";
  // this.form.print_addr = (result.details || '');
  // this.form.name = result.name || '';
  // this.form.mobile = result.mobile || '';

  emit("confirm", form.value);
};
</script>

<style lang="scss" scoped>
.address {
  //   background-color: #ffffff;
  border-radius: 20rpx;
  ::v-deep .uni-textarea-placeholder {
    color: rgb(192, 196, 204);
    font-size: 15px;
  }
}
.copy-btns {
  display: flex;
  justify-content: flex-end;
  button {
    margin: 0;
  }
  .copys {
    margin-left: 20rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #262626;
    line-height: 34rpx;
    text-align: right;
    // background-color: #01ada8;
  }
}
.copy-input {
  width: 100%;
}
</style>
